<template>
  <el-form
      ref="formDataRef"
      :model="formData"
      :rules="formValidRules"
      style="width:100%"
      label-position="top">
    <el-row :gutter="10">



      <el-col :span="24">
        <el-form-item label="机构名称" prop="orgName"
                      :rules="[
        {
          required: true,
          message: '请输入机构名称',
          trigger: 'blur',
        }
      ]">
          <el-input v-model="formData.orgName" :disabled="readOnly"/>
        </el-form-item>
      </el-col>

      <el-col :span="24">
        <el-form-item label="机构编码" prop="orgCode"
                      :rules="[
        {
          required: true,
          message: '请输入机构编码',
          trigger: 'blur',
        }]">
          <el-input v-model="formData.orgCode" :disabled="readOnly"/>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="机构类型" prop="orgType"
                      :rules="[
        {
          required: true,
          message: '请选择机构类型',
          trigger: 'change',
        }]">
          <FormDictRadio v-model:value="formData.orgType" dictType="org_type" :disabled="readOnly"/>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="上级机构" prop="parentId"
                      :rules="[
        {
          required: true,
          message: '请选择上级机构',
          trigger: 'change',
        }]">
          <FormOrgSelect v-model:value="formData.parentId" :disabled="readOnly"></FormOrgSelect>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script lang="ts" setup>
// @ts-ignore
import {getCurrentInstance, onMounted, reactive, ref} from 'vue'
// @ts-ignore
import {ElMessage, FormInstance, FormRules} from 'element-plus'
//定义组件名称
defineOptions({
  name: "DeptEdit"
})

//接收的参数
const props = defineProps({
  params: {required: false, type: Object, default: {}},
  readOnly: {type: Boolean, required: false, default: false}
});

interface Modal {
  id: number,
  orgName: string,
  orgCode?: string,
  regionCode: string,
  parentId: string,
  orgType:string
}

const formDataRef = ref<FormInstance>()

// @ts-ignore
const {proxy} = getCurrentInstance()

// 表单 数据
// @ts-ignore
let formData = ref<Modal>({orgType:'org'})
/**
 * 检测编码是否存在
 * @param rule
 * @param value
 * @param callback
 */
const checkCode = async (rule: any, value: any, callback: any) => {
  let remoteResult = 0;
  await proxy.$http.post('/user-center/org/checkCode', {
    id: formData.value.id,
    orgCode: value
  }).then(function (api: any) {
    if (api.code == 0) {
      remoteResult = api.data;
    }
  });
  if (remoteResult > 0) {
    callback('部门编码已存在');
  } else if (remoteResult < 0) {
    callback('验证异常');

  }
  callback();
};
// 表单 验证
let formValidRules = reactive<FormRules>({
  // @ts-ignore
  orgCode: [{validator: checkCode, trigger: 'blur'}]
});

onMounted(() => {
  if (props.params.id) {
    proxy.$http.post('/user-center/org/findOne', {id: props.params.id}).then(function (api: any) {
      if (api.code == 0) {
        formData.value = api.data;
      }
    });
  }
})

/**
 * 按钮点击事件
 * @param btnType  按钮类型
 * @param params   参数
 * @param rootContext 弹窗父页面
 * @param modelContext  弹窗窗口
 */
const clickEvent = (btnType: string, params: any, rootContext: any, modelContext: any) => {
  switch (btnType) {
    case 'submit':
      // @ts-ignore
      formDataRef.value?.validate((valid: any, fields: any) => {
        if (valid) {
          proxy.$http.post('/user-center/org/save', formData.value).then(function (api: any) {
            if (api.code == 0) {
              rootContext.$refs.defaultTable.reloadTable({});
              ElMessage({
                message: '操作成功',
                type: 'success',
              })
              modelContext.closeModal();
            } else {
              ElMessage({
                message: '操作失败',
                type: 'error',
              })
            }
          });
        }
      })
      break;
    case 'reset':
      // @ts-ignore
      formData.value = {}
      formDataRef.value?.resetFields();
      break;
  }
}
defineExpose({
  clickEvent
});
</script>
